<template>
	<view class="main">
		<view class="content" :class="{
		'bgc-xmc-css':activeSupport==='xmc.css',
		'bgc-xmc-voes':activeSupport==='xmc.voes',
		'bgc-pms-voes':activeSupport==='pms.voes',
		'bgc-pms-sms':activeSupport==='pms.sms',
		'bgc-net-cellular':activeSupport==='net.cellular',}">
			<view class="header-detail">
				<view>
					<image :src="device.devicePic ? device.devicePic:`https://statics.xmcsrv.net/weixin/cloud/device/type/${device.devState ? device.icon+'-1' :device.icon }.svg`" lazy-load style="width: 128rpx; height: 128rpx"></image>
				</view>
				<view style="margin-left: -100rpx">
					<view class="uni-title devname-title scrolling-content" >
<!--						:class="judgeWords(device.devName) ? 'scrolling-content' : ''"-->
						<span >{{device.devName}}</span>
					</view>
					<view class="text-type">型号：{{device.devType}}</view>
				</view>
			</view>
			<swiper @change="swiperChange" class="swiper-box" :indicator-dots="indicatorDots" :current="swiperDotIndex" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="false" previous-margin="80rpx" next-margin="65rpx">
				<swiper-item v-for="(item, index) in supportList" :key="index" >
					<view
								@tap.prevent="toggleTab(index)"
								class="swiper-item"
								:class="{
									'image-xmc-css':item.active==='xmc.css' && item.detail.expireTime && item.detail.expirationtimeColor != 'reds',
									'image-xmc-voes':item.active==='xmc.voes'&& item.detail.expireTime && item.detail.expirationtimeColor != 'reds',
									'image-pms-voes':item.active==='pms.voes'&& item.detail.expireTime && item.detail.expirationtimeColor != 'reds',
									'image-pms-sms':item.active==='pms.sms'&& item.detail.expireTime && item.detail.expirationtimeColor != 'reds',
									'image-net-cellular':item.active==='net.cellular'&& item.expireTime && item.detail.expirationtimeColor != 'reds',
									'image-deactive':(item.detail.expirationtimeColor == 'reds') || (!item.detail.expireTime)
									}">
						<image class="image" :src="`https://statics.xmcsrv.net/weixin/cloud/introduceDetail/${(item.detail.expireTime && item.detail.expirationtimeColor != 'reds') ? item.activeIcon : item.deactiveIcon}.png`"  mode="" />
            <xmcCssButton v-show="item.active==='xmc.css'" class="active-button" :isDeviceIntroduceDetail="true" :message="item.detail"></xmcCssButton>
            <xmcVoesButton v-show="item.active==='xmc.voes'" class="active-button" :isDeviceIntroduceDetail="true" :message="item.detail"></xmcVoesButton>
            <pmsVoesButton v-show="item.active==='pms.voes'" class="active-button" :isDeviceIntroduceDetail="true" :message="item.detail"></pmsVoesButton>
            <pmsSmsButton v-show="item.active==='pms.sms'" class="active-button" :isDeviceIntroduceDetail="true" :message="item.detail"></pmsSmsButton>
            <netCellularButton v-show="item.active==='net.cellular'" class="active-button" :isDeviceIntroduceDetail="true" :message="item.detail"></netCellularButton>
					</view>

				</swiper-item>
			</swiper>
		</view>
		<xmc-css v-show="activeSupport==='xmc.css'" :deviceInfo="deviceInfo"></xmc-css>
		<pms-sms v-show="activeSupport==='pms.sms'" :deviceInfo="deviceInfo"></pms-sms>
		<pms-voes v-show="activeSupport==='pms.voes'" :deviceInfo="deviceInfo"></pms-voes>
		<net-cellular v-show="activeSupport==='net.cellular'" :deviceInfo="deviceInfo"></net-cellular>
		<xmc-voes v-show="activeSupport==='xmc.voes'" :deviceInfo="deviceInfo"></xmc-voes>
	</view>
</template>

<script>
import xmcCssButton from "../../pages/cloud/xmcCss/xmcCss.vue"
import pmsVoesButton from "../../pages/cloud/pmsVoes/pmsVoes.vue"
import pmsSmsButton from "../../pages/cloud/pmsSms/pmsSms.vue"
import netCellularButton from "../../pages/cloud/netCellular/netCellular.vue"
import xmcVoesButton from "../../pages/cloud/xmcVoes/xmcVoes.vue"
import xmcCss from "../introduce/xmcCss.vue";
import pmsVoes from "../introduce/pmsVoes.vue";
import pmsSms from "../introduce/pmsSms.vue";
import netCellular from "../introduce/netCellular.vue";
import xmcVoes from "../introduce/xmcVoes.vue";
export default {
	options:{
		styleIsolation:'shared'
	},
	mixins: [],
	components: {
		xmcCss,
		pmsVoes,
		pmsSms,
		netCellular,
		xmcVoes,
		xmcCssButton,
		pmsVoesButton,
		pmsSmsButton,
		netCellularButton,
		xmcVoesButton
	},
	data() {
		return {
			activeSupport:null,
			indicatorDots: true,
			autoplay: false,
			interval: 2000,//切换的间隔时间
			duration: 500,//滑动动画时长
			device:null,
			mode:'default',
			swiperDotIndex:0,
			deviceInfo:{
				modalName:null,
				isIntroduceDetail:true,
			},
			supportList:[],
		}
	},
	onLoad(opt) {
		let enData = decodeURIComponent(opt.deviceInfo)
		this.device = JSON.parse(enData)
		let item = this.device
		console.log('deviceIntroduceDetail===>',this.device)
		if(item['xmc.css']&&item['xmc.css']['xmc.css.pic.support']){
			this.supportList.push({
				active:'xmc.css',
				activeIcon:'xmcCss1',
				deactiveIcon:'xmcCss0',
				detail:item['xmc.css']
			})
		}
		if(item['net.cellular']&&item['net.cellular']['net.cellular.support']){
			this.supportList.push({
				active:'net.cellular',
				activeIcon:'netCellular1',
				deactiveIcon:'netCellular0',
				detail:item['net.cellular']
			})
		}
		if(item['xmc.voes']&&item['xmc.voes']['xmc.voes.support']){
			this.supportList.push({
				active:'xmc.voes',
				activeIcon:'xmcVoes1',
				deactiveIcon:'xmcVoes0',
				detail:item['xmc.voes']
			})
		}
		if(item['pms.voes']&&item['pms.voes']['pms.voes.support']){
			this.supportList.push({
				active:'pms.voes',
				activeIcon:'pmsVoes1',
				deactiveIcon:'pmsVoes0',
				detail:item['pms.voes']
			})
		}
		if(item['pms.sms']&&item['pms.sms']['pms.sms.support']){
			this.supportList.push({
				active:'pms.sms',
				activeIcon:'pmsSms1',
				deactiveIcon:'pmsSms0',
				detail:item['pms.sms']
			})
		}
		this.activeSupport = this.supportList[this.swiperDotIndex].active
	},
	onShow(){
	},
	methods: {
		// 轮播图事件
		swiperChange(e) {
			this.swiperDotIndex = e.detail.current
			console.log(this.supportList[this.swiperDotIndex].active)
			this.activeSupport = this.supportList[this.swiperDotIndex].active
		},

    //切换选项卡
    toggleTab(index) {
      this.swiperDotIndex = index;
			this.activeSupport = this.supportList[this.swiperDotIndex].active
    },
    //滑动切换swiper
    tabChange(e) {
      // console.log(e);
      this.tabIndex = e.detail.current;
    },
		judgeWords(str){
			if(str.length > 8){
				return true
			}else{
				return false
			}
		}
	}
}
</script>

<style lang="less" scoped>
@import '@/common/style/main.css';
.devname-title{
	max-width: 400rpx;
	overflow: hidden;
	//white-space: nowrap;
}
.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #999;
	color: #fff;
	margin: 10px;
	/* app上运行不显示图片，就需要加下面这行，设置高度 */
	height: 250rpx;
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	opacity: 1;
	border: 2rpx solid #FFFFFF;
}
// 置灰背景图
.image-deactive{
  background: linear-gradient(119deg, #E8E8E8 0%, #ACB4B9 100%);
}
//云存储
.bgc-xmc-css{
	background: linear-gradient(180deg, #F0FBFF 0%, #DFF0FD 55%, #DEEDFD 100%);
}
// 云电话
.bgc-xmc-voes{
	background: linear-gradient(180deg, #F1F4FB 0%, #C2D6F0 100%);
}
// 语音报警
.bgc-pms-voes{
	background: linear-gradient(180deg, #FCF9F0 0%, #FFECC1 54%, #FFEBBC 100%);
}
// 短信报警
.bgc-pms-sms{
	background: linear-gradient(180deg, #FDF5F0 0%, #FFEBD0 52%, #FFEBD0 100%);
}
// 4g流量
.bgc-net-cellular{
	background: linear-gradient(180deg, #F5F5FD 0%, #D2D8FD 100%);
}
//云存储
.image-xmc-css{
	background: linear-gradient(136deg, #E3F5FF 0%, #95C4E8 100%);
}
// 云电话
.image-xmc-voes{
	background: linear-gradient(136deg, #EAF0FA 0%, #90ADDB 100%);
}
// 语音报警
.image-pms-voes{
	background:  linear-gradient(119deg, #FBECBF 0%, #F5BD5F 100%);
}
// 短信报警
.image-pms-sms{
	background: linear-gradient(119deg, #FCE6DB 0%, #E49471 100%);
}
// 4g流量
.image-net-cellular{
	background: linear-gradient(119deg, #E2E7F8 0%, #AEBCF0 100%);
}
.bgc0{

}
.active-button{
	position: fixed;
  left: 30rpx;
  top: 20rpx;
}
.image {
	position: fixed;
	width: 250rpx;
	height: 267rpx;
	right: 20rpx;
	top:0rpx;
	display: block;
	//width: 650rpx;
	//height: 250upx;
	//border-radius: 15upx;
}
.header-detail{
	height: 160rpx;
	margin:0rpx auto 0rpx auto;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
.text-type{
	margin-top: -20rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
}
.scrolling-content{
	//animation: marquee 10s linear infinite;
}
@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
</style>